<template>
  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="title" v-bind="$attrs">
    <template #header="scope">
      <slot name="header" v-bind="scope">
        <div style="display: flex">
          <slot name="title">
            <span style="flex: 1">{{ title }}</span>
          </slot>
        </div>
      </slot>
    </template>

    <slot></slot>

    <template #footer>
      <slot name="footer">
        <ElButton @Click="handleClose()">取 消</ElButton>
        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
      </slot>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts" name="EcoDrawer">
import { ElDrawer, ElButton, type DrawerProps } from 'element-plus'
import { ref, unref, shallowRef } from 'vue'

defineOptions({ name: 'WorkDrawer' })

interface EcoDrawerProps {
  title?: string // 顶部标题
  fullscreen?: boolean // 是否默认全屏，默认 false
  fullscreenIcon?: boolean // 是否渲染全屏图标，默认 true
}

const props = withDefaults(defineProps<EcoDrawerProps>(), {
  title: '弹框',
  fullscreen: false,
  fullscreenIcon: true
})

const emits = defineEmits<{
  close: [value: DrawerProps | null]
  confirm: [value: DrawerProps | null]
}>()

const drawerVisible = defineModel<boolean>({ required: true })

const isFullscreen = ref(props.fullscreen)
const elDrawerRef = shallowRef<DrawerProps | null>(null)

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const handleClose = () => {
  emits('close', unref(elDrawerRef))
  drawerVisible.value = false
}

const handleConfirm = () => {
  emits('confirm', unref(elDrawerRef))
  drawerVisible.value = false
}

defineExpose({ elDrawerRef })
</script>

<style lang="scss" scoped></style>
